<template>
  <view class="container">
    <view class="warehouse-info" v-if="warehouseInfo && (warehouseInfo.warehouseName || warehouseInfo.address)" @click="goToWarehouseDetail">
      <view class="warehouse-info-left">
        <text class="title">{{ warehouseInfo.warehouseName }}</text>
        <view class="warehouse-info-left-address">
          <image src="/static/assets/sourceInfo/source-icon-location.png" class="addr-icon" style="width: 18rpx;height: 25rpx;"/>
          <text class="address">{{ warehouseInfo.address }}</text>
        </view>
      </view>
      <view class="warehouse-info-right">
        <uni-icons type="right" size="18 rpx " color="#000" ></uni-icons>
      </view>
    </view>
    <AppointmentForm 
      @submit="handleSubmit"
      @appointmentSuccess="handleAppointmentSuccess"
      @cancelPppointment="handleCancelAppointment"
      :warehouseId="warehouseInfo.warehouseId"
    />
  </view>
</template>

<script>
import AppointmentForm from '@/components/AppointmentForm.vue'
import { API } from '@/utils/api.js'
import { processImageUrls } from '@/utils/url-helper.js'

export default {
  components: {
    AppointmentForm
  },
  data() {
    return {
      warehouseInfo: {},
    }
  },
  computed: {
    warehouseTitle() {
      return this.warehouseInfo.warehouseName || ''
    },
    warehouseAddress() {
      return this.warehouseInfo.address || ''
    }
  },
  onLoad(options) {
    this.fetchWarehouseInfo(options.warehouseId)
  },
  methods: {
    async fetchWarehouseInfo(id) {
      try {
        const res = await API.warehouse.getDetail(id)
        this.warehouseInfo = processImageUrls(res)
        console.log("this.warehouseInfo",this.warehouseInfo);
      } catch (e) {
        console.error('获取仓库信息失败', e)
        this.warehouseInfo = {}
      }
    },
    goToWarehouseDetail() {
      // 跳转到仓库详情页
      if (this.warehouseInfo.warehouseId) {
        uni.navigateTo({
          url: `/pages/warehouse/warehouseDetail?id=${this.warehouseInfo.warehouseId}&isHidenReserve=true`
        })
      }
    },
    async handleSubmit(formData) {
      try {
        // 这里可以调用API提交预约数据
        console.log('预约数据:', formData)
        
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 可以在这里添加实际的API调用
        // const result = await API.appointment.create(formData)
        
        return Promise.resolve()
      } catch (error) {
        console.error('预约提交失败:', error)
        return Promise.reject(error)
      }
    },
    
    // 处理预约成功事件
    handleAppointmentSuccess() {
      console.log('预约成功事件触发')
      // 预约成功后的额外处理逻辑可以在这里添加
    },
    
    // 处理取消预约事件
    handleCancelAppointment() {
      console.log('取消预约事件触发')
      // 取消预约后的额外处理逻辑可以在这里添加
    }
  }
}
</script>

<style scoped>
.container {
  background: #ffffff;
  min-height: 100vh;
}
.warehouse-info {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 24rpx 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-light);
}

.warehouse-info-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.title {
  font-size: 30rpx;
  font-weight: 600;
  color: #222;
  display: block;
  margin-bottom: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.warehouse-info-left-address {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.warehouse-info-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.address {
  font-size: 24rpx;
  color: #888;
}

</style>
